<template>
  <!-- 外层容器套着，主要做背景图 -->
  <div class="content">
    <van-uploader :after-read="afterRead" class="upimg" :style="{opacity: op}"/>
    <img :src="img" alt="" class="img">
    <van-form @submit="onSubmit" class="login opacity">
      <van-field
        v-model="username"
        name="userName"
        label="用户名"
        placeholder="用户名"
        :rules="[{ required: true, message: '请填写用户名' }]"
      />
      <van-field
        v-model="password"
        type="password"
        name="password"
        label="密码"
        placeholder="密码"
        :rules="[{ required: true, message: '请填写密码' }]"
      />
      <van-field
        v-model="password2"
        type="password"
        name="password2"
        label="确认密码"
        placeholder="再次输入密码"
        :rules="[{ required: true, message: '请再次填写密码' }]"
      />
      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit">注册</van-button>
      </div>
    </van-form>
    <router-link :to="{ name: 'Login' }" class="loginBtn">已有账号？去登陆!</router-link>
  </div>
</template>

<script>
import { login, reg } from "../services/auth";
import { setToken, setImg, getImg } from "../utils/auth";
import {post} from '../utils/request'
import { Toast } from "vant";
export default {
  data() {
    return {
      username: "",
      password: "",
      password2: "",
      img:"",
      op: 1
    };
  },
  methods: {
    onSubmit(values) {
      console.log(values);
      if (values.password == values.password2) {
        const { userName, password } = values;
        console.log({ userName, password });
        reg({ userName, password }).then((res) => {
          console.log(res);
          if (res.code === "success") {
            Toast.fail("注册成功");
            setToken(res.token);
            setTimeout(() => {
              this.$router.push({
                name: "Login",
              });
            }, 2000);
            console.log(123);
          } else {
            // if (res.code == "error") {
            //   Toast.fail("用户名已存在");
            // } else {
            //
            // }
          }
        });
      } else {
        Toast.fail("两次密码不一致");
      }
    },
    afterRead(file) {
    // 此时可以自行将文件上传至服务器
    if(getImg()) {
      this.op=0
    }else{
      this.op=1
    }
    console.log(file);
    const formData = new FormData()
    formData.append('file', file.file)
    post('/api/v1/common/file_upload', formData).then((res) => {this.touxiang = res.info
    this.img = `http://192.168.12.75:3009${res.info}`
    setImg(this.img)
    })
    },
  },
};
</script>

<style scope>
.login {
  margin-top: 200px;
}
.loginBtn {
  float: right;
  margin-right: 20px;
}
  .preview-cover {
    position: absolute;
    box-sizing: border-box;
    bottom: 0;
    width: 100%;
    padding: 4px;
    color: #fff;
    font-size: 12px;
    text-align: center;
    background: rgba(0, 0, 0, 0.3);
  }
  .upimg{
    left: 38%;
    top: 100px;
    z-index: 999;
    opacity: 0;
  }
  .img{
    position:absolute;
    top: 30px;
    left: 78px;
  }
</style>